<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_Promise-Promise各个状态区分</title>
  <!-- 
  在 JavaScript 中， `Promise`  是一个用于处理异步操作的对象，它有三种状态：Pending（待定）、Fulfilled（已兑现）和 Rejected（已拒绝）。理解这三种状态及其区别对于掌握  `Promise`  的使用至关重要。
  1. Promise 的三种状态

   1.1 Pending（待定）
  - 定义：这是  `Promise`  的初始状态，表示异步操作尚未完成。
  - 特点：在这个状态下， `Promise`  既没有被解决（fulfilled），也没有被拒绝（rejected）。
  - 示例：在创建  `Promise`  时，它最开始的状态是  `Pending` 。
  const myPromise = new Promise((resolve, reject) => {
      // 这里的代码是异步操作，初始状态为 Pending
  });
   1.2 Fulfilled（已兑现）
  - 定义：表示异步操作成功完成，并返回一个结果值。
  - 转换：当  `Promise`  的状态从  `Pending`  转换为  `Fulfilled`  时，会调用  `resolve`  函数。
  - 特点：在这个状态下， `Promise`  会返回一个值，可以通过  `.then()`  方法处理这个值。
  const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {

      
          resolve("Operation successful!"); // 状态变为 Fulfilled
      }, 1000);
  });

  myPromise.then(result => {
      console.log(result); // 输出: Operation successful!
  });
   1.3 Rejected（已拒绝）
  - 定义：表示异步操作失败，并返回一个错误信息。
  - 转换：当  `Promise`  的状态从  `Pending`  转换为  `Rejected`  时，会调用  `reject`  函数。
  - 特点：在这个状态下， `Promise`  会返回一个错误，可以通过  `.catch()`  方法处理这个错误。
  const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
          reject("Operation failed!"); // 状态变为 Rejected
      }, 1000);
  });

  myPromise.catch(error => {
      console.error(error); // 输出: Operation failed!
  });
  2. 状态转换的流程

  - 初始状态：当创建  `Promise`  时，状态为  `Pending` 。
  - 成功完成：如果异步操作成功，调用  `resolve` ，状态变为  `Fulfilled` 。
  - 失败：如果异步操作失败，调用  `reject` ，状态变为  `Rejected` 。

  3. 状态的不可逆性
  - 一旦  `Promise`  的状态从  `Pending`  转换为  `Fulfilled`  或  `Rejected` ，就不能再改变。即：
    - 如果状态为  `Fulfilled` ，则后续的  `resolve`  或  `reject`  调用将被忽略。
    - 如果状态为  `Rejected` ，则后续的  `resolve`  或  `reject`  调用也将被忽略。

  4. 总结
  `Promise`  的三种状态（Pending、Fulfilled、Rejected）为 JavaScript 的异步编程提供了一个清晰的模型。通过理解这些状态及其转换，开发者可以更有效地处理异步操作，编写出更健壮和可维护的代码。掌握这些概念对于使用  `Promise`  进行异步编程至关重要。
  -->
</head>
<body>

  <script>
    // 1. Promise的状态
    const promise = new Promise((resolve, reject) => {
      // 注意: Promise的状态一旦被确定下来, 就不会再更改, 也不能再执行某一个回调函数来改变状态
      // 1.待定状态 pending
      console.log("状态1: pending"); // pending

      // 2.已兑现状态 fulfilled
      resolve("成功");
      console.log("状态2: fulfilled"); // fulfilled

      // 3.已拒绝状态 rejected
      reject("失败");
      console.log("状态3: rejected"); // rejected
    })

    promise.then((value) => {
      console.log("成功: ", value); // 成功:  成功
    }).catch((reason) => {
      console.log("失败: ", reason); // 失败:  成功
    })

  </script>
  
</body>
</html>